<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>testIndex</title>
</head>

<body>

	<!-- start -->
	<div id="app"></div>
	<!-- end -->

</body>

<template id="mineTpl">
	<div>
		<h2>mineTpl - 这是一个模板</h2>
		<h3>当前总和: {{countVal}}</h3>

		<div>==========</div>
		<div>当前步长({{step}})</div>
		<input type="number" :value="step" @input="step = Number($event.target.value)" />

		<div>==========</div>
		<test-cpn v-for="(item, index) in valList" :key="index" :item="item" :step="step" :index="index"
			@change="changeVal($event, index)"></test-cpn>
	</div>
</template>

<!-- js start -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script type="text/javascript" src="./cpns/testCpnEmit.js"></script>
<script type="text/javascript">
	Vue.config.productionTip = false;

	// 在 #app 标签下渲染一个按钮组件
	new Vue({
		el: '#app',
		template: document.querySelector('#mineTpl'),
		components: {
			testCpn
		},
		computed: {
			countVal: function () {
				return (this.valList || []).reduce((pre, cur) => {
					return pre + (cur.val || 0)
				}, 0)
			}
		},
		data() {
			return {
				step: 1,
				valList: [
					{
						val: 0,
					},
					{
						val: 0,
					}
					, {
						val: 0,
					}
				]
			}
		},
		methods: {
			changeVal(val, index) {
				// console.log(...arguments)
				this.valList[index].val = val
			},
		}
	});

</script>

</html>